<template>
  <div class="tables">
    <div class="categoryWrap rightQ">
      <div class="operatingBtn">
        <el-button @click="quXiao">取 消</el-button>
        <el-button @click="quXiao" type="primary">保 存</el-button>
      </div>
    </div>

    <div class="moKuai">
      <h3>基本信息</h3>
      <div class="serchLeft">
        <div>
          <span>创建人 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>创建人编号 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>项目标签 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
      <div class="serchLeft">
        <div>
          <span>客户名称 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>联系人 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>联系方式 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
      <div class="serchLeft">
        <div>
          <span>项目名称 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>项目需求编号 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>项目类型一 :</span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
      <div class="serchLeft">
        <div>
          <span>项目类型二 :</span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>开始时间 :</span>
          <el-date-picker v-model="value" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
        <div>
          <span>结束时间 :</span>
          <el-date-picker v-model="value" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <div class="serchLeft">
        <div>
          <span>项目来源 :</span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
    </div>

    <div class="moKuai">
      <h3>关联信息</h3>
      <div class="serchLeft">
        <div>
          <span>签单状态 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>项目合同编号 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>项目报价编号 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
      <div class="serchLeft">
        <div>
          <span>项目预核算编号 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
    </div>

    <div class="moKuai">
      <h3>项目需求</h3>
      <div class="serchLeft">
        <div class="fuWenBen">
          <span>材料需求 : </span>
          <div class="fromWrap">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="number" label="序号"> </el-table-column>
              <el-table-column prop="resource" label="类别">
                <template>
                  <div class="iptT">
                    <el-input v-model="value" placeholder="请输入"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="num" label="名称">
                <template>
                  <div class="iptT">
                    <el-input v-model="value" placeholder="请输入"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="编号"> </el-table-column>
              <el-table-column prop="times" label="数量"> </el-table-column>
              <el-table-column prop="remark" label="单位"> </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
            </el-table>
            <p class="addFrom" @click="addFrom">
              <i class="el-icon-plus"></i>
            </p>
          </div>
        </div>

        <div class="fuWenBen">
          <span>工时需求 : </span>
          <div class="fromWrap">
            <el-table :data="tableData1" border style="width: 100%">
              <el-table-column prop="number" label="序号"> </el-table-column>
              <el-table-column prop="resource" label="类别">
                <template>
                  <div class="iptT">
                    <el-input v-model="value" placeholder="请输入"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="num" label="数量">
                <template>
                  <div class="iptT">
                    <el-input v-model="value" placeholder="请输入"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column prop="unit" label="单位"> </el-table-column>
              <el-table-column prop="remark" label="备注"> </el-table-column>
            </el-table>
            <p class="addFrom" @click="addFrom">
              <i class="el-icon-plus"></i>
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="moKuai">
      <h3>招标信息</h3>
      <div class="serchLeft">
        <div>
          <span>招标名称 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>招标方式 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>招标轮数 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
      <div class="serchLeft">
        <div>
          <span>保证金 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
        <div>
          <span>招标时间 : </span>
          <el-date-picker v-model="value" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
    </div>

    <div v-for="(item, index) of list" :key="index" class="moKuai">
      <h3>{{ item.title }}</h3>
      <div class="serchLeft">
        <div>
          <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <div slot="file" slot-scope="{ file }">
              <div class="fileList">
                <div class="fileItem">
                  <div class="name">{{ file.name }}</div>
                  <i class="el-icon-error" @click="handleRemove(file)"></i>
                  <el-button size="mini" @click="filePreview(file.url)"
                    >删除</el-button
                  >
                  <el-button size="mini" @click="downLoad(file.url)"
                    >下载</el-button
                  >
                </div>
              </div>
            </div>
            <el-button size="small" type="primary">上传</el-button>
          </el-upload>
        </div>
      </div>
    </div>

    <div class="moKuai">
      <h3>沟通信息</h3>
      <div class="serchLeft">
        <div class="fuWenBen">
          <span>备注 :</span>
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6 }"
            placeholder="请输入内容"
            v-model="value"
          >
          </el-input>
        </div>
      </div>
    </div>

    <div class="moKuai">
      <h3>评价</h3>
      <div class="serchLeft">
        <div>
          <span>评分 : </span>
          <el-input clearable placeholder="请输入" v-model="value"> </el-input>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      value: "",
      tableData: [
        {
          number: "1",
          content: "",
          resource: "",
          unit: "",
          times: "",
          remark: "",
          num: "",
        },
      ],
      tableData1: [
        {
          number: "1",
          resource: "",
          num: "",
          unit: "",
          remark: "",
        },
      ],
      fileList: [
        {
          name: "food.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
        {
          name: "food2.jpeg",
          url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
        },
      ],
      list: [
        { title: "客户输入附件" },
        { title: "会议纪要" },
        { title: "项目工程计划" },
        { title: "项目方案" },
        { title: "供应商资料" },
        { title: "其他附件" },
      ],
    };
  },
  methods: {
    quXiao() {
      this.$router.go(-1);
    },
    addFrom() {
      let obj = {
        number: "1",
        content: "",
        resource: "",
        unit: "",
        times: "",
        remark: "",
        num: "",
      };
      this.tableData.push(obj);
      let obj1 = { number: "1", resource: "", unit: "", remark: "", num: "" };
      this.tableData1.push(obj1);
    },

    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style lang="scss" scoped>
.wid {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  background: #f5f5f5;
  .topButton {
    position: absolute;
    right: 20px;
    top: 20px;
  }
  .categoryWrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    box-sizing: border-box;
    padding-bottom: 0;

    .operatingBtn {
      display: flex;
      margin: 0 5px;
      align-items: center;
    }
  }
  .rightQ {
    justify-content: flex-end;
  }
  .moKuai {
    padding: 15px 20px;
    .serchLeft {
      width: 80%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      > div {
        margin-right: 30px;
        margin-bottom: 20px;
      }
      > div:nth-child(3n + 3) {
        margin-right: 0px;
      }
      span {
        width: 110px;
        color: #333;
        font-size: 16px;
        margin-right: 20px;
        display: inline-block;
      }
      .el-input,
      .el-select {
        width: 250px;
      }
      .el-input__inner {
        width: 250px;
      }
      .fuWenBen {
        width: 100%;
        display: flex;
        .fromWrap {
          flex: 1;
        }
      }
      ::v-deep.el-upload-list {
        margin-left: 100px !important;
      }
      .fileList {
        .fileItem {
          display: flex;
          align-items: center;
          .name {
            margin-right: 10px;
          }
          .el-icon-error {
            margin-right: 10px;
          }
        }
      }
    }
  }
  .fromWrap {
    padding: 0 60px;
    .addFrom {
      width: 60px;
      height: 50px;
      border: 2px solid #e1e1e1;
      line-height: 50px;
      text-align: center;
      margin: 30px auto 50px;
      color: #333;
      font-size: 25px;
      font-weight: bold;
      border-radius: 4px;
    }
  }
}
.iptT {
  ::v-deep .el-input {
    width: 100% !important;
    height: 100% !important;

    .el-input__inner {
      border: none !important;
      padding: 0;
    }
  }
}
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: none;
}
</style>
